<template>
    <!-- 1.增加时 id 怎么控制。2.修改的逻辑是怎么操作。3.如何让二级只有修改没有增加。 -->
    <!-- *
        data	展示数据	array
        show-checkbox	节点是否可被选择	boolean	—	false
        node-key	每个树节点用来作为唯一标识的属性，整棵树应该是唯一的	String    
        default-expand-all	是否默认展开所有节点	boolean	—	false
        expand-on-click-node	是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。	boolean	—	true
        render-content	树节点的内容区的渲染 Function	Function(h, { node, data, store }
    * -->
    <div>
        <el-tree :data="data" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false"
            :render-content="renderContent" :props="defaultProps">
        </el-tree>
        <!-- 新增、修改弹框 -->
        <Dialog ref="child" :info="info" :type="type" @refresh="cotryNodes"></Dialog>
    </div>
</template>
<script>
import { getCtoryNodes, nodesDelet } from '@/api/request/product/index'
import { songFun } from '@/utils/index'
import Dialog from './dialog.vue'
export default {
    name: 'big-tree-page',
    components: {
        Dialog
    },
    data() {
        return {
            defaultProps: {
                label: 'name'
            },
            data: [
                // 方法2 静态数据 通过 props 属性 重新定义 名称用 name
                {
                    id: 1,
                    name: '一级 1',
                    children: [{
                        id: 4,
                        name: '二级 1-1',
                    }]
                },
                // 方法1 静态数据 名称用 label
                // {
                //     id: 1,
                //     label: '一级 1',
                //     children: [{
                //         id: 4,
                //         label: '二级 1-1',
                //     }]
                // }
            ],
            info: {},
            type: 1,  // 1 新增 2 修改
        }
    },
    created() {
        this.cotryNodes()
    },
    methods: {
        async cotryNodes() {
            let res = await getCtoryNodes('/category-nodes')
            //this.data = songFun.tranSation(res)   // 方法1：新建对象，提取返回数据中的值   
            this.data = songFun.usePropsAtrr(res) // 方法2 使用组件 props 属性 更改组件接受的属性名称，与后端返回的一致
        },
        append(data) {
            this.$refs.child.dialogFormVisible = true
            this.info = {
                title: `新增(${data.name})分类名称`,
                cid: data.cid
            }
            this.type = 1
        },
        editor(data) {
            this.$refs.child.dialogFormVisible = true
            this.$refs.child.input = data.name
            this.info = {
                title: `修改(${data.name})名称`,
                cid: data.cid
            }
            this.type = 2
        },
        remove(node, data) {
            this.$confirm('此操作将永久删除该节点, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                console.log('node',node ,'data',data);
                let res = await nodesDelet('/node-delet', { cid: data.cid })
                if (res.code != 200) return this.$message.error('error')
                this.cotryNodes()
                this.$message.success('删除成功!')
            }).catch(() => {
                this.$message.info('已取消删除!')
            });
        },
        renderContent(h, { node, data }) {
            // console.log('node', node);
            return (
                <span class="custom-tree-node">
                    {/* 这里不能使用 vue 语法，需要使用  JSX 语法 */}
                    <span>{node.label}</span>
                    {
                        node.level == 1 ? <span class={'btns'}>
                            <el-button size="mini" on-click={() => this.append(data)} icon="el-icon-plus" plain>新增</el-button>
                            <el-button size="mini" on-click={() => this.editor(data)} icon="el-icon-edit">修改</el-button>
                            <el-button size="mini" type="danger" on-click={() => this.remove(node, data)} icon="el-icon-delete">删除</el-button>
                        </span> : <span class={'btns'}>
                            <el-button size="mini" on-click={() => this.editor(data)} icon="el-icon-edit">修改</el-button>
                            <el-button size="mini" type="danger" on-click={() => this.remove(node, data)} icon="el-icon-delete">删除</el-button>
                        </span>
                    }

                </span>);
        },
    }
}
</script>
<style scoped lang="less">
/deep/ .el-tree-node__content {
    margin-bottom: 10px;
}

/deep/ .custom-tree-node {
    width: 40%;
    padding-top: 5px;

    .btns {
        width: 300px;
        text-align: center;
        margin: 0 50%;
    }
}
</style>